<template>
  <van-pull-refresh v-model="status.isLoading" :disabled="canFresh" @refresh="onRefresh">
    <template #pulling>
      <span class="finish">下拉即可刷新...</span>
    </template>
    <template #loading>
      <div class="loading">
        <svg viewBox="25 25 50 50" width="30" height="30">
          <circle cx="50" cy="50" r="20"></circle>
        </svg>
      </div>
    </template>
    <template #loosing>
      <span class="finish">释放即可刷新...</span>
    </template>
    <template #success>
      <span class="finish">刷新成功</span>
    </template>
    <!-- 不用加载的内容 -->
    <slot name="content"></slot>
    <van-list v-model="status.loading" offset="1" :finished="status.finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
      <template #loading>
        <div class="loading">
          <svg viewBox="25 25 50 50" width="30" height="30">
            <circle cx="50" cy="50" r="20"></circle>
          </svg>
        </div>
      </template>
      <template #default>
        <!-- 使用插槽占位 -->
        <slot name="list"></slot>
      </template>
      <template #finished>
        <span class="finish">没有更多了</span>
      </template>
    </van-list>
  </van-pull-refresh>
</template>

<script>
export default {
  props: {
    status: Object,
    canFresh: {
      default: false,
      type: Boolean
    }
  },
  methods: {
    // 下拉刷新
    onRefresh() {
      this.$emit('on-refresh')
    },
    // 滚动加载更多
    onLoad() {
      this.$emit('on-load')
    }
  }
}
</script>

<style lang="less" scoped>
.loading {
  display: flex;
  align-items: center;
  justify-content: center;

  span.finish {
    margin-left: 5px;
  }

  // 刷新
  circle {
    fill: none;
    stroke: #d84647;
    stroke-width: 3;
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
  }

  @keyframes rotate {
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes dash {
    0% {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
    }
    50% {
      stroke-dasharray: 90, 200;
      stroke-dashoffset: -35px;
    }
    100% {
      stroke-dashoffset: -125px;
    }
  }
}

.finish {
  color: #d84647;
}
</style>
